<template>
    <uxt-modal
        classes="radius"
        :value="show"
        :modal-close="false"
        :width="260"
        :height="260"
        :bg-color="bgColor"
        :color="color"
    >
        <view class="loading flex flex-col align-center justify-center width-p100 height-p100">
            <image class="logo radius" src="/static/logo.png" />
            {{ tip }}
        </view>
    </uxt-modal>
</template>

<script>
import baseMixin from '../mixins/base.js'
import uxtModal from './uxt-modal.vue'

export default {
    mixins: [baseMixin],
    components: {
        uxtModal
    },
    props: {
        // 控制显示与隐藏
        show: {
            type: Boolean,
            default: false
        },
        tip: {
            type: String,
            default: '加载中...'
        },
        color: {
            type: String,
            default: 'theme'
        },
        bgColor: {
            type: String,
            default: 'white'
        }
    }
}
</script>

<style lang="scss" scoped>
.loading {
    font-size: 28rpx;
    line-height: 2.4em;
    .logo {
        width: 70rpx;
        height: 70rpx;
    }
    &::after {
        content: '';
        position: absolute;
        top: 24rpx;
        left: 24rpx;
        border-radius: 50%;
        width: 200rpx;
        height: 200rpx;
        font-size: 10px;
        border-top: 6rpx solid rgba(0, 0, 0, 0.05);
        border-right: 6rpx solid rgba(0, 0, 0, 0.05);
        border-bottom: 6rpx solid rgba(0, 0, 0, 0.05);
        border-left: 6rpx solid #f37b1d;
        border-left-color: inherit;
        animation: spin 1s infinite linear;
        z-index: -1;
    }
}
</style>
